<script setup>
import {getAuditStatusText, getSurveysStatusText, goPreviewSurveys} from "../../utils/CommonsUtil.js";
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {off} from "@arco-design/web-vue/es/_utils/dom.js";
import {deleteSurveysApi, getSurveysListApi, updateSurveysApi} from "../../apis/SurveysApi.js";
import {Message} from "@arco-design/web-vue";
import {addUserApi, getUserListApi, updateUserApi} from "../../apis/UserApi.js";
import {BASE_URL} from "../../config/index.js";
import {auditTemplateApi, deleteAuditApi, getAuditListApi} from "../../apis/TemplateApi.js";

const router = useRouter()
const auditList = ref([])
const searchInput = ref('')
const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0, // 总条数初始为0
    showTotal: true, // 显示总数
    showPageSize: true, // 显示页码切换器
    showJumper: true, // 显示快速跳转
});
//筛选状态 默认全部
const searchStatus = ref(-1)
const dataLoading = ref(false);
// 修改后的获取数据方法
const getAuditList = async () => {
    dataLoading.value = true
    let query = {
        status: searchStatus.value,
    }
    const res = await getAuditListApi(pagination.value.current, pagination.value.pageSize, query)
    if (res.code === 0) {
        auditList.value = res.data.records
        pagination.value.total = Number(res.data.total)
    } else {
        Message.error(res.message)
    }
    dataLoading.value = false
}
// 处理分页变化事件
const handlePageChange = (current) => {
    pagination.value.current = current
    getAuditList()
}
const handleAudit = async (status, data) => {
    let req = {
        id: data.id,
        status: status,
        surveyId: data.surveyId
    }
    const res = await auditTemplateApi(req)
    if (res.code === 0) {
        Message.success('操作成功')
        await getAuditList()
    } else {
        Message.error(res.message)
    }
};
const previewSurvey = (data) => {
    goPreviewSurveys(data.surveyId)
}
// 处理每页数量变化事件
const handlePageSizeChange = (pageSize) => {
    pagination.value.pageSize = pageSize
    getAuditList()
}
//删除审批记录
const handleDelete = async (id) => {
    const res = await deleteAuditApi(id)
    if (res.code === 0) {
        Message.success('删除成功')
        await getAuditList()
    } else {
        Message.error(res.message)
    }
}

onMounted(async () => {
    await getAuditList()
})
</script>

<template>
    <div class="py-8 px-24">
        <div>
            <a-select @change="getAuditList()" v-model="searchStatus" class="ml-8" :style="{width:'120px'}" placeholder="状态">
                <a-option :value="-1" >全部</a-option>
                <a-option :value="0" >待审核</a-option>
                <a-option :value="1" >审核通过</a-option>
                <a-option :value="2" >审核拒绝</a-option>
            </a-select>

        </div>
        <a-table
            :scroll="{x:2000,y:200}"
            bordered
            :loading="dataLoading"
            stripe
            :data="auditList"
            :pagination="pagination"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
            class="mt-4"
        >
            <template #columns>
                <a-table-column
                    title="审批编号"
                    dataIndex="id"
                    key="id"
                    width="80"
                />
                <!-- 问卷状态 -->
                <a-table-column
                    title="审核状态"
                    data-index="status"
                    :width="110"
                >
                    <template #cell="{ record }">
                        <a-tag color="#7bc616" v-if="record.status === 0"> {{ getAuditStatusText(record.status)}}</a-tag>
                        <a-tag color="#165dff" v-if="record.status === 1"> {{ getAuditStatusText(record.status)}}</a-tag>
                        <a-tag color="#ff5722" v-if="record.status === 2"> {{ getAuditStatusText(record.status)}}</a-tag>

                    </template>
                </a-table-column>

                <a-table-column
                    title="申请用户"
                    dataIndex="userName"
                    key="userName"
                    width="90"
                />
                <a-table-column
                    title="审核用户"
                    dataIndex="auditUserName"
                    key="auditUserName"
                    width="90"
                />
                <a-table-column
                    title="问卷标题"
                    dataIndex="surveyTitle"
                    key="surveyTitle"
                    width="110"
                />
                <a-table-column
                    title="申请时间"
                    dataIndex="createTime"
                    key="createTime"
                    width="120"
                />
                <a-table-column
                    title="操作时间"
                    dataIndex="updateTime"
                    key="updateTime"
                    width="120"
                />


                <!-- 操作列 -->
                <a-table-column
                    title="操作"
                    :width="160"
                    fixed="right"
                >
                    <template #cell="{ record }">


                        <a-space>
                            <a-button
                                type="primary"
                                    @click="previewSurvey(record)">
                                预览
                            </a-button>

                            <a-popconfirm v-if="record.status === 0" type="warning"
                                          content="确认后无法修改，确定吗?" @ok="handleAudit(1,record)">
                                <a-button
                                    type="primary"
                                    status="success">
                                    审核通过
                                </a-button>
                            </a-popconfirm>

                            <a-popconfirm v-if="record.status === 0" type="warning"
                                          content="确认后无法修改，确定吗?" @ok="handleAudit(2,record)">
                                <a-button
                                    type="primary"
                                    status="warning">
                                    不通过
                                </a-button>
                            </a-popconfirm>

                            <a-popconfirm type="error" content="删除后不可恢复，确认删除吗？"
                                          @ok="handleDelete(record.id)">
                                <a-button
                                    type="primary"
                                    status="danger">
                                    删除
                                </a-button>
                            </a-popconfirm>


                        </a-space>
                    </template>
                </a-table-column>
            </template>
        </a-table>
    </div>



</template>

<style scoped>

</style>
